<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>设备配网</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	<style type="text/css">
		.tab{width:100%;border: 1px solid #eee;border-bottom: none;}
		.tab td{padding: 5px;border-bottom: 1px solid #eee;}
		.tab td.no_bbr{border-bottom: none !important;}
		.tab td.name{width:50%;}
		.tab td.set_name{width:20%}
		.qiandu div{height:30px;background-color:#00CC00;}
		.refresh {text-align: center;margin-top: 20px;}
		.button{display: block;margin-left: auto;margin-right: auto;padding-left: 14px;padding-right: 14px;box-sizing: border-box;font-size: 18px;text-align: center;text-decoration: none;color: #FFFFFF;background-color: #1AAD19;line-height: 2.55555556;border-radius: 5px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);overflow: hidden;}
		.button:active{background-color: #179B16;color: rgba(255, 255, 255, 0.6);}
		.button:disabled{background-color: #9ED99D !important;color: rgba(255, 255, 255, 0.6) !important;}

		.weui-btn{position: relative;display: block;margin-left: auto;margin-right: auto;padding-left: 14px;padding-right: 14px;box-sizing: border-box;font-size: 18px;text-align: center;text-decoration: none;color: #fff;line-height: 2.55555556;border-radius: 5px;-webkit-tap-highlight-color: rgba(0,0,0,0);overflow: hidden;}
		.weui-btn:after {content: " ";width: 200%;height: 200%;position: absolute;top: 0;left: 0;border: 1px solid rgba(0,0,0,.2);-webkit-transform: scale(.5);transform: scale(.5);-webkit-transform-origin: 0 0;transform-origin: 0 0;box-sizing: border-box;border-radius: 10px;}

		.return{color: #000;background-color: #f8f8f8;margin-top: 15px;}

		#loadts{color: #666;}

		#set_net{display: none;}
		#set_net td{line-height:30px;}
		.startnet{text-align: center;margin-top: 30px;}
		.default_input{width:90%;height:30px;font-size:16px;line-height:18px;}
		input[readonly]{border: 1px solid #FFF;background:transparent !important;background-image: none;}
		#wifi_pass{width:90%;height:30px;font-size:16px;line-height:18px;}

		#wait_div{display: none; position: absolute;z-index: 10000; width:100%;height:100%;top: 0px;left: 0px;background-color: rgba(0, 0, 0, 0.5);}
		#wait_div .tishi{position: absolute;z-index: 10001; width:90%;top:10%;left:5%;border: 1px solid #E4E4E4;background-color: #f5f3f3;border-radius: 3px;height: 50%;padding-top: 30%;text-align: center;}
		#wait_div .tishi div{margin: 10px;line-height: 180%}
		#wait_div .red{color: #ff0000;}
	</style>
</head>
<body>
	<div id="select">
		<h3>请选择您要连接的WiFi网络</h3>
		<div id="wifilist"></div>
		<div class="refresh">
			<span id="loadts">如果你要连接的网络不在上面列表</span><br/>
			<a id="refresh" class="button" href="###">请点击这里刷新</a>
			<a id="setadd" href="javascript:void(0);" class="weui-btn return">手动添加隐藏网络</a>
		</div>
	</div>
	<div id="set_net" class="">
		<h3>输入无线网络密码</h3>
		<table class="tab" cellpadding="0" cellspacing="0">
			<tr>
				<td class="set_name">WiFi</td>
				<td id="wifi_input">
					<input type="text" name="wifi_name" id="wifi_name" readonly="readonly" class="default_input" />
					<input type="hidden" name="scan_ssid" id="scan_ssid" value="0" />
				</td>
			</tr>
			<tr>
				<td class="no_bbr">密码</td>
				<td class="no_bbr">
					<input type="password" name="wifi_pass" id="wifi_pass" value="" class="default_input" />
					<br/>
				</td>
			<tr>
				<td></td>
				<td>
					<input type="checkbox" id="showpass" />
					<label for="showpass">显示密码</label>
					<div>如果连接公开网络（无密码）请留空。</div>
				</td>
			</tr>
		</table>
		<div class="startnet">
			<a href="javascript:void(0);" id="start" class="button">开始连网</a><br/>
			<a href="javascript:void(0);" id="return" class="weui-btn return">返回</a>
		</div>
	</div>

	<div id="wait_div">
		<div class="tishi">
			<div>
				<h2>正在尝试设备连接</h2>
				<div>手机辅助配网工作已经完成，<div class="red">请查看设备上的连接状态提示！</div></div>
			</div>
		</div>
	</div>
<script src="js/zepto.min.js"></script>
<script type="text/javascript">
$(function(){
	var select = $('#select');
	var set_net = $('#set_net');
	var wait_div = $('#wait_div');
	var retry_i = 0;
	var load_list = function(){
		select.show();
		$.ajax({
			url: '../api/setwifi.py?op=getlist',
			cache: false,
			beforeSend: function(){
				$("#loadts").html('正在扫描当前位置可用网络……');
			},
			success: function(json) {
				var arr = JSON.parse(json);
				if (arr.length<=0 && retry_i<=10){
					retry_i++;
					setTimeout(() => {load_list()}, 500);
				}
				var html = '<table class="tab" cellpadding="0" cellspacing="0">';
				$.each( arr, function(i, n){
					html += '<tr data-name="'+n.wifi_name+'"><td class="name">'+ n.wifi_name +'</td><td class="qiandu"><div style="width:'+ n.wifi_qual+'%"></div></td></tr>';
					//console.log( n );
				});
				html += '</table>';
				$("#wifilist").html(html);
				$('#loadts').html('如果你要连接的网络不在上面列表')
				$('#refresh').show();

				$('[data-name]').click(function(){
					select.hide();
					wait_div.hide();
					set_net.show();
					var name = $(this).attr('data-name');
					$('#wifi_name').val(name);
					$('#wifi_name').attr({'readonly':'readonly'});
					$('#scan_ssid').val(0);
				});
			}
		});
	};

	setTimeout(() => {
		load_list()
	}, 1000);

	//刷新按钮
	$('#refresh').click(function(){
		load_list();
		$(this).hide();
	});

	//手动添加网络
	$('#setadd').click(function(){
		select.hide();
		set_net.show();
		wait_div.hide();

		$('#wifi_name').removeAttr('readonly');
		$('#scan_ssid').val(1)
	})

	//返回按钮
	$('#return').click(function(){
		$('#wifi_pass').val('')
		$('#showpass').attr("checked",false);
		select.show();
		set_net.hide();
		wait_div.hide();
		load_list();
	})

	//开始配置连网
	$('#start').click(function(){
		var _this = $(this);
		var wifi_name = $('#wifi_name').val();
		if (wifi_name.length<=0){
			alert('WiFi账号不能为空');
			return;
		}
		var wifi_pass = $('#wifi_pass').val();
		if (wifi_pass.length>0 && wifi_pass.length<8){
			alert('密码不能少于8位(字母、数字、符号)');
			return;
		}
		var scan_ssid = $('#scan_ssid').val();
		var post_data = {'op': 'setinfo', 'wifiname': wifi_name,'wifipass':wifi_pass,'scanssid': scan_ssid};
		$.ajax({
			url: '../api/setwifi.py',
			cache: false,
			type: "GET",
			data: post_data,
			beforeSend: function(){
				_this.attr({'disabled':'disabled'});
			},
			complete: function() {
				//这里直接跳转即可，因为远程网络配置已经重置
			}
		});
		wait_div.show();
	});

	//显示密码
	$('#showpass').click(function(){
		var wifi_pass = $('#wifi_pass');
		if($(this).is(':checked')){
			wifi_pass.attr({'type':"text"});
		}else{
			wifi_pass.attr({'type':"password"});
		}
	})
});
</script>
</body>
</html>